<template>
	<view class="category">
		<view class="category-header">搜索商品</view>
		<view class="category-main">
			<view class="main-left">
				<view class="left-item" :class="{'active':currentIndex === index}" v-for="(cate,index) in categoryList" :key="cate.id" @click="changeCurrentIndex(index)">{{cate.name}}</view>
			</view>
			<scroll-view class="main-right" scroll-y="true" >
				<image class="right-img" :src="currentInfo.imgUrl" mode=""></image>
				<view class="right-goods">
					<view class="goods-item" v-for="item in currentInfo.subCateList" :key="item.id">
						<image :src="item.wapBannerUrl" mode=""></image>
						<text>{{item.name}}</text>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	export default {
		data() {
			return {
				currentIndex:0
			};
		},
		onLoad() {
			this.getCategoryListData()
		},
		computed: {
			...mapState('category',['categoryList']),
			currentInfo(){
				return this.categoryList[this.currentIndex]
			}
		},
		methods: {
			...mapActions('category',['getCategoryListData']),
			changeCurrentIndex(index){
				this.currentIndex = index
			}
		},
	}
</script>

<style lang="stylus">
	.category 
		height: 100%;
		width: 100%;
		.category-header 
			width: 90%;
			background-color: #aaa;
			text-align: center;
			font-size:28upx 
			height: 60upx;
			line-height: 60upx;
			margin:10upx auto;
		.category-main 
			border-top: 1upx solid #aaa  
			display: flex
			.main-left 
				width: 20%;
				.left-item 
					font-size:28upx 
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					&.active 
						background-color: hotpink;
						border-bottom:1upx solid blue
			.main-right 
				flex:1
				height: calc(100vh - 80upx)
				border-left:1upx solid #aaa
				.right-img 
					display: block
					width: 88%;
					height: 200upx;
					// margin: 20upx 6%
					margin: 20upx auto
				.right-goods 
					display: flex
					flex-wrap: wrap
					.goods-item
						width: 33.333%;
						font-size: 26upx
						text-align: center;
						height: 160upx;
						image 
							width: 90%;
							height: 100upx;
							padding-bottom: 10upx
</style>